<template>
	<div>
		<div class="publicpageview" id="publicpageview">
			<div style="text-align: center;font-weight: bold;margin-top: 20px;">附加租金分析表</div>
			<div style="display:flex;margin-top: 10px;flex-flow: row wrap" v-if="topContet">
				<div style="margin-left: 30px;">产别{{topContet.field1}}</div>
				<div style="margin-left: 30px;">管片{{topContet.field2}}</div>
				<div style="margin-left: 30px;">所号{{topContet.field8}}</div>
				<div style="margin-left: 30px;">地址{{topContet.field3}}</div>
				<div style="margin-left: 30px;">查询日期{{topContet.field4}}</div>
				<div style="margin-left: 30px;">调租日期{{topContet.field5}}</div>
			</div>
			<div style="display: flex;margin-top: 20px;box-sizing: border-box;">
				<div class="list4">所号</div>
				<div class="list7">
					地址
				</div>
				<div class="list2">
					<div class="list6">澡盆</div>
					<div style="display: flex;">
						<div class="list5">数量(个)</div>
						<div class="list5">租金(米)</div>
					</div>
				</div>
				<div class="list2" style="width:240px">
					<div class="list6">阳台</div>
					<div style="display: flex;">
						<div class="list5">数量(个)</div>
						<div class="list5">面积(米)</div>
						<div class="list5">租金(米)</div>
					</div>
				</div>
				<div class="list2" style="width:240px">
					<div class="list6">封闭阳台</div>
					<div style="display: flex;">
						<div class="list5">数量(个)</div>
						<div class="list5">面积(米)</div>
						<div class="list5">租金(米)</div>
					</div>
				</div>
				<div class="list2" style="width:240px">
					<div class="list6">独用院</div>
					<div style="display: flex;">
						<div class="list5">数量(个)</div>
						<div class="list5">面积(米)</div>
						<div class="list5">租金(米)</div>
					</div>
				</div>
			</div>
			 <!-- v-for="(item,index) in list" :key="index" -->
			<div style="display: flex;box-sizing: border-box;" v-for="(item,index) in list" :key="index">
				<div class="list8">{{item.fieldName1}}</div>
				<div class="list9">{{item.fieldName2}}</div>
				<div class="list3">{{item.fieldName3}}</div>
				<div class="list3">{{item.fieldName4}}</div>
				<div class="list3">{{item.fieldName5}}</div>
				<div class="list3">{{item.fieldName6}}</div>
				<div class="list3">{{item.fieldName7}}</div>
				<div class="list3">{{item.fieldName8}}</div>
				<div class="list3">{{item.fieldName9}}</div>
				<div class="list3">{{item.fieldName10}}</div>
				<div class="list3">{{item.fieldName11}}</div>
				<div class="list3">{{item.fieldName12}}</div>
				<div class="list3">{{item.fieldName13}}</div>
			</div>
			<div style="display: flex;box-sizing: border-box;">
				<div class="list8">合计</div>
				<div class="list9"></div>
				<div class="list3">{{hejiObject.fieldName3}}</div>
				<div class="list3">{{hejiObject.fieldName4}}</div>
				<div class="list3">{{hejiObject.fieldName5}}</div>
				<div class="list3">{{hejiObject.fieldName6}}</div>
				<div class="list3">{{hejiObject.fieldName7}}</div>
				<div class="list3">{{hejiObject.fieldName8}}</div>
				<div class="list3">{{hejiObject.fieldName9}}</div>
				<div class="list3">{{hejiObject.fieldName10}}</div>
				<div class="list3">{{hejiObject.fieldName11}}</div>
				<div class="list3">{{hejiObject.fieldName12}}</div>
				<div class="list3">{{hejiObject.fieldName13}}</div>
			</div>
		</div>

		<button style="margin: 10px auto 0;display: block;" @click="handleout">打印附加租金分析表</button>
		
		<!-- <button style="margin: 10px auto 0;display: block;" v-print="printObj">打印附加租金分析表</button>
		<div id="loading" v-show="printLoading"></div> -->
	</div>
</template>

<script>
	import * as XLSX from 'xlsx'
	import dayjs from 'dayjs'
	import {
		houseAdminList,
		addRoom,
		roomDetails,
		updRoom,
		blockList,
		blockDetail
	} from '@/api/industry'
	export default {
		props: {
			blockobj: Object
		},
		name: 'zujintiaozhengguocheng',
		data() {
			return {
				printLoading: true,
				printObj: {
					id: "publicpageview",
					popTitle: '打印预览',
					extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css",
					beforeOpenCallback(vue) {
						console.log('打开之前')
					},
					openCallback(vue) {
						console.log('执行了打印')
					},
					closeCallback(vue) {
						console.log('关闭了打印工具')
					}
				},
				list: [],
				topContet: {},
				hejiObject: {
					fieldName3: 0,
					fieldName4: 0,
					fieldName5: 0,
					fieldName6: 0,
					fieldName7: 0,
					fieldName8: 0,
					fieldName9: 0,
					fieldName10: 0,
					fieldName11: 0,
					fieldName12: 0,
					fieldName13: 0
				}
			}
		},
		computed: {},
		mounted() {
			console.log(this.blockobj)
			this.list = this.blockobj.export2List
			this.topContet = this.blockobj.exportTou
			if (this.list) {
				this.list.forEach((item, index) => {
					this.hejiObject.fieldName3 = Number(this.hejiObject.fieldName3) + Number(item.fieldName3)
					this.hejiObject.fieldName4 = Number(this.hejiObject.fieldName4) + Number(item.fieldName4)
					this.hejiObject.fieldName5 = Number(this.hejiObject.fieldName5) + Number(item.fieldName5)
					this.hejiObject.fieldName6 = Number(this.hejiObject.fieldName6) + Number(item.fieldName6)
					this.hejiObject.fieldName7 = Number(this.hejiObject.fieldName7) + Number(item.fieldName7)
					this.hejiObject.fieldName8 = Number(this.hejiObject.fieldName8) + Number(item.fieldName8)
					this.hejiObject.fieldName9 = Number(this.hejiObject.fieldName9) + Number(item.fieldName9)
					this.hejiObject.fieldName10 = Number(this.hejiObject.fieldName10) + Number(item.fieldName10)
					this.hejiObject.fieldName11 = Number(this.hejiObject.fieldName11) + Number(item.fieldName11)
					this.hejiObject.fieldName12 = Number(this.hejiObject.fieldName12) + Number(item.fieldName12)
					this.hejiObject.fieldName13 = Number(this.hejiObject.fieldName13) + Number(item.fieldName13)
				})
			}
		},

		methods: {
			handleout() {
				this.$confirm('此操作将导出该条内容，请确认是否继续操作？', '导出提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				})
				.then(() => {
					let list = this.list
					let outList = []
					this.list.forEach((item, index) => {
						outList.push({
							所号: item.fieldName1,
							地址: item.fieldName2,
							'澡盆数量(个)': item.fieldName3,
							'澡盆租金(米)': item.fieldName4,
							'阳台数量(个)': item.fieldName5,
							'阳台面积(米)': item.fieldName6,
							'阳台租金(个)': item.fieldName7,
							'封闭阳台数量(个)': item.fieldName8,
							'封闭阳台面积(米)': item.fieldName9,
							'封闭阳台租金(米)': item.fieldName10,
							'独用院数量(个)': item.fieldName11,
							'独用院面积(米)': item.fieldName12,
							'独用院租金(米)': item.fieldName13
						})
					})
					outList.push({
						所号: '合计',
						地址: '',
						'澡盆数量(个)': this.hejiObject.fieldName3,
						'澡盆租金(米)': this.hejiObject.fieldName4,
						'阳台数量(个)': this.hejiObject.fieldName5,
						'阳台面积(米)': this.hejiObject.fieldName6,
						'阳台租金(个)': this.hejiObject.fieldName7,
						'封闭阳台数量(个)': this.hejiObject.fieldName8,
						'封闭阳台面积(米)': this.hejiObject.fieldName9,
						'封闭阳台租金(米)': this.hejiObject.fieldName10,
						'独用院数量(个)': this.hejiObject.fieldName11,
						'独用院面积(米)': this.hejiObject.fieldName12,
						'独用院租金(米)': this.hejiObject.fieldName13
					})
					// 获取表格数据
					const data = outList
					// 转换数据为工作表
					const worksheet = XLSX.utils.json_to_sheet(data)
					// 创建新的工作簿
					const workbook = XLSX.utils.book_new()
					// 将工作表添加到工作簿
					XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
					// 导出Excel文件
					XLSX.writeFile(workbook, '附加租金分析表.xlsx')
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消导出'
					})
				})
			}
		},
	}
</script>

<style scoped>
	.publicpageview {
		width: 1160px;
		height: auto;
		background-color: #fff;
		margin: 20px auto 0;
		overflow: hidden;
		box-sizing: border-box;
		padding: 20px;
		outline: 1px solid black;
	}

	.list1 {
		width: 100px;
		box-sizing: border-box;
		height: 30px;
		line-height: 30px;
		text-align: center;
		outline: 1px solid black;
	}

	.list2 {
		height: 40px;
		line-height: 30px;
		outline: 1px solid black;
		text-align: center;
		font-size: 12px;
	}

	.left {
		width: 25px;
		height: 360px;
		outline: 1px solid black;
		line-height: 180px;
		text-align: center;
		box-sizing: border-box;
	}

	.list3 {
		width: 80px;
		height: 20px;
		line-height: 20px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
		font-size: 12px
	}

	.list4 {
		font-size: 12px;
		width: 80px;
		height: 40px;
		line-height: 40px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
	}
	.list8{
		font-size: 12px;
		width: 80px;
		height: 20px;
		line-height: 20px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
	}

	.list7 {
		font-size: 12px;
		width: 150px;
		height: 40px;
		line-height: 40px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
	}
	
	.list9{
		font-size: 12px;
		width: 150px;
		height: 20px;
		line-height: 20px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
	}

	.list5 {
		font-size: 12px;
		width: 80px;
		height: 20px;
		line-height: 20px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
	}

	.list6 {
		font-size: 12px;
		width: 100%;
		height: 20px;
		line-height: 20px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
	}
</style>